웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용하여 이미지(Image) 또는 파일을 업로드 할 경우 base64로 변환하여 서버에 올리는 방법에 대하여 알아봅니다.
! 언제 base64로 이미지를 변환할까
서버에 이미지를 올릴때 파일을 직접 전송할 수도 있지만 데이터를 bade64로 인코딩한 후 업로딩 하는 방법도 많이 사용됩니다. 올라간 데이터는 다시 파일로 변환하거나 데이터베이스에 바로 저장하여 사용할 수 있을 것입니다. 그렇다면 어떻게해야 base64로 인코딩, 변환할 수 있을까요?# 업로드 할 파일 base64 인코딩하기
먼저 자바스크립트의 FileReader 내부객체를 사용하여 파일에 접근할수 있습니다. 이때 변수를 만들어 객체를 생성하여 해당 파일의 결과인 인코딩 값을 얻게됩니다. 아래 코드를 봐주세요.! Step 1
아래와 같이 input에 파일이 담긴 경우입니다.
<input type="file" id="myFile" />
! Step 2
reader라는 변수에 FileReader() 내장객체를 사용하기 위해 인스턴스를 담는다.
var file = document.querySelector('#myFile');
var result;
// 정상 로드시 result에 인코딩 값을 저장하기
var reader = new FileReader(file);
reader.onload = function() {
result = reader.result;
}
// 실패할 경우 에러 출력하기
reader.onerror = function (error) {
console.log('Error');
};
var result;
// 정상 로드시 result에 인코딩 값을 저장하기
var reader = new FileReader(file);
reader.onload = function() {
result = reader.result;
}
// 실패할 경우 에러 출력하기
reader.onerror = function (error) {
console.log('Error');
};
파일이 정상적으로 읽혀지면 result에 인코딩 값을 저장, 반환하게됩니다. 이 값을 서버에 전송하여 사용할 수 있을 것입니다.
! Base64 업로드한 이미지 출력하기
이번에는 저장된 base64를 다시 출력하는 방법입니다. 만약 위에서 변환된 코드를 데이터베이스등의 저장소에 저장한 경우 이를 불러와 다시 출력하는 방법을 알아봅니다 <span>Database image : </span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAIAAAAf7rriAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACISURBVDhPzYvLEYAwFALtzKvF21PEQPSFfHTGizucgF3SB/ryuu0xahtcNi1Gj0Al27uNfoVbtt8oemck22MeKmAoswfWIxoo24Zwu7AVYd+RORjdz69khNuFrQj7Uwa2IeyB9YiGiTwJFSAZ2GMUvTO3DOzXRr9CJQN7x+gRcJk8aqQvvyKlA6eGPYq2034+AAAAAElFTkSuQmCC" alt="Blue Circle">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAIAAAAf7rriAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACISURBVDhPzYvLEYAwFALtzKvF21PEQPSFfHTGizucgF3SB/ryuu0xahtcNi1Gj0Al27uNfoVbtt8oemck22MeKmAoswfWIxoo24Zwu7AVYd+RORjdz69khNuFrQj7Uwa2IeyB9YiGiTwJFSAZ2GMUvTO3DOzXRr9CJQN7x+gRcJk8aqQvvyKlA6eGPYq2034+AAAAAElFTkSuQmCC" alt="Blue Circle">
위 img 태그는 불러온 인코딩 텍스트를 src 속성에 추가하였습니다. 이를 웹상에서 추가하면 아래와 같이 잘 나오게됩니다.
! Outlook email html에 적용하면?
email HTML에 적용하면 어떻게 나올지 정상적으로 출력될지 테스트 해보았습니다. 결과적으로 Outlook에서 정상적으로 나타나지 않더군요... 아쉽지만 email HTML에 사용은 어렵다는 결론입니다.<span>Database image : </span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAIAAAAf7rriAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACISURBVDhPzYvLEYAwFALtzKvF21PEQPSFfHTGizucgF3SB/ryuu0xahtcNi1Gj0Al27uNfoVbtt8oemck22MeKmAoswfWIxoo24Zwu7AVYd+RORjdz69khNuFrQj7Uwa2IeyB9YiGiTwJFSAZ2GMUvTO3DOzXRr9CJQN7x+gRcJk8aqQvvyKlA6eGPYq2034+AAAAAElFTkSuQmCC" alt="Blue Circle"><p>위에 나타난 파란원이 바로 base64 이미지를 불러와 img
태그로 출력한 부분입니다.</p>
아래의 글도 찾고 계시지 않나요?
